<template>
	<view class="content">
		
		<view class="background">
			<!-- 空白页 -->
			<empty v-if="loaded === true && withdrawList.length === 0"></empty>

			<!-- 收益明细开始 -->
			<view class="earnings">
				<!-- 收益明细内 -->
				<view class="earnings-text" v-for="(item, index) in withdrawList" :key="index">
					<view class="earnings-text_left">
						<view class="date">
							<text>{{ item.addtime_text }}</text>
						</view>
						<view class="message">
							<text>{{ item.description }}</text>
						</view>
						<view class="checknote">
							<text>审核说明：{{ item.checknote || '暂无' }}</text>
						</view>
					</view>
					<view class="earnings-text_right">
						<text class="color">
							<text>{{ item.ischeck_text }}</text>
						</text>
						<text class="totalmoney">金额:{{ item.money }}</text>
					</view>
				</view>
			</view>
			<!-- 收益明细结束 -->
			
			<uni-load-more :status="loadingType"></uni-load-more>
			
		</view>
	</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			headerPosition: 'fixed',
			headerTop: '0px',
			loaded: false, //加载完成
			loadingType: 'more', //加载更多状态

			token: '',
			withdrawList: [],
			
			p: 1,
			size: 20,
			count: 0
		};
	},
	onLoad(option) {
		// #ifdef H5
		this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
		// #endif
	},
	onShow() {
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo({
				url: '/pages/public/login'
			});
			return;
		}
		
		//获取信息
		this.loadData('refresh');
		
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	//上拉加载更多数据
	onReachBottom() {
		this.loadData();
	},
	methods: {
		// 兑奖明细
		async loadData(type = 'add') {
			if (this.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			
			//没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else {
				this.loadingType = 'more';
			}
		
			if (type === 'refresh') {
				this.withdrawList = [];
				this.p = 1;
				this.count = 0;
				//下拉刷新停止
				uni.stopPullDownRefresh();
			}
			
			const param = {};
			param.token = this.token;
			param.p = this.p;
			param.size = this.size;
			await this.$http.request('User', 'rechargelog', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						
						if(res.data.data.count > 0){
							this.withdrawList = this.withdrawList.concat(res.data.data.list);
						}
						
						this.p = this.p + 1;
						this.count = res.data.data.count;
						this.loaded = true;
						
						//判断是否还有下一页，有是more  没有是nomore
						if(this.count){
							this.loadingType = this.count <= (this.p - 1) * this.size ? 'nomore' : 'more';
						}else{
							this.loadingType = 'nomore';
						}
						
					}
				}
				
			});
		},
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #ffff;
}
.content {
	height: calc(100vh);
	// 全局两边间距
	.background {
		padding: 0 10upx;
	}

	// 字体红色
	.color {
		color: red;
	}

	.earnings {
		width: 100%;

		.earnings-text {
			width: 100%;
			height: 150upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2upx solid #eee;

			&:nth-child(2n) {
				background-color: #eeeeee;
			}
			
			// 左边
			.earnings-text_left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: 200upx;
				font-size: 24upx;
				padding-left: 10upx;

				// 日期
				.date {
					
				}

				// 个人信息
				.message {
					
				}
				
				.checknote{
					margin-top: 6upx;
					font-size: 26upx;
					color: #4399FC;
				}
				
			}

			// 右边
			.earnings-text_right {
				display: flex;
				flex-direction: column;
				font-size: 26upx;
				padding-right: 10upx;

				text {
					margin: 13upx 0;
					text-align: right;
				}
			}
		}
	}
}
</style>